<template>
  <view class="container">
    <view class="header">
      <text class="title">社区API测试</text>
    </view>
    
    <view class="test-section">
      <button @click="testGetPosts" class="test-btn">测试获取帖子列表</button>
      <view v-if="postsResult" class="result">
        <text class="result-title">帖子列表结果:</text>
        <text class="result-text">{{ postsResult }}</text>
      </view>
    </view>
    
    <view class="test-section">
      <button @click="testCreatePost" class="test-btn">测试创建帖子</button>
      <view v-if="createResult" class="result">
        <text class="result-title">创建帖子结果:</text>
        <text class="result-text">{{ createResult }}</text>
      </view>
    </view>
    
    <view class="test-section">
      <button @click="testCheckLimit" class="test-btn">测试发帖频控检查</button>
      <view v-if="limitResult" class="result">
        <text class="result-title">频控检查结果:</text>
        <text class="result-text">{{ limitResult }}</text>
      </view>
    </view>
    
    <view class="logs">
      <text class="logs-title">请求日志:</text>
      <view v-for="(log, index) in logs" :key="index" class="log-item">
        <text class="log-text">{{ log }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getCommunityPosts, createPost, checkPostLimit } from '@/api/community'

// 数据状态
const postsResult = ref('')
const createResult = ref('')
const limitResult = ref('')
const logs = ref<string[]>([])

// 添加日志
function addLog(message: string) {
  const timestamp = new Date().toLocaleTimeString()
  logs.value.unshift(`[${timestamp}] ${message}`)
  if (logs.value.length > 10) {
    logs.value = logs.value.slice(0, 10)
  }
}

// 测试获取帖子列表
async function testGetPosts() {
  try {
    addLog('开始测试获取帖子列表...')
    const response = await getCommunityPosts({
      pageNo: 1,
      pageSize: 5
    })
    
    addLog(`请求完成，状态码: ${response.code}`)
    
    if (response.code === 0) {
      postsResult.value = `成功获取 ${response.data?.list?.length || 0} 条帖子`
      addLog('获取帖子列表成功')
    } else {
      postsResult.value = `失败: ${response.msg}`
      addLog(`获取帖子列表失败: ${response.msg}`)
    }
  } catch (error: any) {
    const errorMsg = error.message || '未知错误'
    postsResult.value = `请求异常: ${errorMsg}`
    addLog(`请求异常: ${errorMsg}`)
    console.error('获取帖子列表异常:', error)
  }
}

// 测试创建帖子
async function testCreatePost() {
  try {
    addLog('开始测试创建帖子...')
    const response = await createPost({
      content: '这是一个测试帖子，用于验证API是否正常工作',
      type: 'text',
      images: []
    })
    
    addLog(`请求完成，状态码: ${response.code}`)
    
    if (response.code === 0) {
      createResult.value = `成功创建帖子，ID: ${response.data}`
      addLog('创建帖子成功')
    } else {
      createResult.value = `失败: ${response.msg}`
      addLog(`创建帖子失败: ${response.msg}`)
    }
  } catch (error: any) {
    const errorMsg = error.message || '未知错误'
    createResult.value = `请求异常: ${errorMsg}`
    addLog(`请求异常: ${errorMsg}`)
    console.error('创建帖子异常:', error)
  }
}

// 测试发帖频控检查
async function testCheckLimit() {
  try {
    addLog('开始测试发帖频控检查...')
    const response = await checkPostLimit()
    
    addLog(`请求完成，状态码: ${response.code}`)
    
    if (response.code === 0) {
      limitResult.value = `可发帖: ${response.data?.canOperate}, 剩余次数: ${response.data?.remainingCount}`
      addLog('频控检查成功')
    } else {
      limitResult.value = `失败: ${response.msg}`
      addLog(`频控检查失败: ${response.msg}`)
    }
  } catch (error: any) {
    const errorMsg = error.message || '未知错误'
    limitResult.value = `请求异常: ${errorMsg}`
    addLog(`请求异常: ${errorMsg}`)
    console.error('频控检查异常:', error)
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.test-section {
  margin-bottom: 30px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.test-btn {
  width: 100%;
  height: 50px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 15px;
}

.result {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #007aff;
}

.result-title {
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.result-text {
  color: #666;
  font-size: 14px;
  word-break: break-all;
}

.logs {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logs-title {
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 15px;
  font-size: 16px;
}

.log-item {
  margin-bottom: 8px;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.log-text {
  font-size: 12px;
  color: #666;
  font-family: monospace;
}
</style>
